<template>
  <Button
    v-bind="filterAttrs"
    v-on="$listeners"
    :disabled="!hasAuth.result"
    @click="handlerTips"
  >
    <template v-if="AuthLabel && !showDefaultLabel">
      {{AuthLabel}}
    </template>
    <template v-else>
      <slot></slot>
    </template>
  </Button>
</template>
<script lang="ts">
import { Vue, Mixins, Component, Prop } from 'vue-property-decorator'
import { Button } from 'ant-design-vue'
import { omit, isObject } from 'lodash-es'

type TBasicAuth = string | string[]

/**
 * 联合类型，可以自定义控制字段，值
*/
type TUnionAuth = {
  keys: Array<string | boolean>,
  relate: 'and' | 'or'
}

type IAuthOptions = TBasicAuth | TUnionAuth

@Component({
  components: {
    Button
  }
})
export default class AuthBotton extends Vue {
  @Prop({
    type: [String, Array, Object],
    default: ''
  })
  public auth!: IAuthOptions
  @Prop({
    type: Boolean,
    default: false
  })
  public showDefaultLabel!: boolean

  public handerlDisabled = false

  get filterAttrs() {
    return {
      ...omit(this.$attrs, 'disabled')
    }
  }

  // get hasAuth() {
  //   // 1、仅权限控制
  //   // 2、仅disabled控制
  //   // 3、既有权限控制又有disabled控制
  //   /**
  //    * |是否有访问权限|自带disabled属性|结果|
  //    * |   -        |   -            |false|
  //    * | false      |   -            |false|
  //    * | false      |  false         |false|
  //    * | false      |  true          |false|
  //    * |   -        |  false         |false|
  //    * |   -        |  true          |true|
  //    * | true       |   -            |true|
  //    * | true       |  false         |true|
  //    * | true       |  true          |false|
  //   */

  //  // @ts-ignore
  //  console.log(this, this.$slots.default[0].text)
  //   // 1、5、6
  //   if (typeof this.auth === 'undefined') return !!this.$attrs.disabled;
  //   // 2 3 4
  //   // if (this.currentAuth === undefined) return true;
  //   // 7 8 9
  //   return Boolean(this.currentAuth) ? !this.$attrs.disabled : false
  // }

  // get customDisabled() {
    

  //   // return !this.currentAuth || this.$attrs.disabled
  //   if (this.currentAuth) {
  //     return (typeof this.$attrs.disabled !== 'undefined' ? true : this.$attrs.disabled)
  //   }
  //   return true
  // }

  get AuthMap() {
    const auth = new Map()
    // @ts-ignore
    this.$route?.meta.permission.forEach(item => {
      auth.set(item.value, item);
    })
    return auth;
  }

  get currentAuth() {
    let auths: TUnionAuth = {
      keys: [],
      relate: 'or'
    }
    if (Array.isArray(this.auth)) {
      auths.keys = this.auth
    } else if (isObject(this.auth)) {
      auths.keys = this.auth.keys
      auths.relate = this.auth.relate
    } else {
      auths.keys = [<string>this.auth]
    }
    return auths
  }

  get hasAuth() {
    // 如果命中权限，则记录当前权限对象
    let value: unknown;
    if (!this.auth || this.currentAuth.keys.length === 0) return {
      result: true,
      value
    };
    // 根据关联关系判断
    const result = this.currentAuth.keys[this.currentAuth.relate === 'or' ? 'some' : 'every'](key => {
      if (typeof key === 'string') {
        if (this.AuthMap.get(key)) {
          // 多个默认取第一个
          !value && (value = this.AuthMap.get(key))
          return true
        }
        return false
      }
      return key
    })

    return {
      result,
      value
    }
  }

  get AuthLabel() {
    // @ts-ignore
    return this.hasAuth.value ? this.hasAuth.value.label : ''
  }

  public handlerTips() {
    if (!this.hasAuth.result) {
      this.$message.error('您没有当前操作权限！请联系管理员授权')
    }
  }
}
</script>

